<template>
  <div>
    <!-- 顶部logo -->
    <div class="logo"></div>
    <!-- 搜索框 -->
    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        background="#f00"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <!-- 轮播图 -->
    <carousel :data="banner" v-if="banner.length > 0"></carousel>
    <!-- 商品分类 -->
    <div class="types">
      <div class="type" v-for="item in tp" :key="item.id">
        <img :src="item.icon" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 推荐分类及商品 -->
    <div class="typePros">
      <div class="typePro" v-for="typePro in types" :key="typePro.id">
        <h3>
          <img src="../../assets/images/l-icon.png" alt="" />
          {{ typePro.name }}
          <img src="../../assets/images/r-icon.png" alt="" />
        </h3>
        <div
          class="product"
          v-for="product in typePro.products"
          :key="product.id"
        >
          <p class="supplier">本产品产自{{ product.supplier }}</p>
          <img :src="product.banner" alt="" />
          <p class="proname">{{ product.name }}</p>
          <p class="specs">商品规则：{{ product.specs }}</p>
          <p class="price">价格：￥{{ product.price }}元</p>
          <van-button round type="danger">加入购物车</van-button>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <myFooter></myFooter>
  </div>
</template>

<script>
import carousel from '@/components/Home/carousel'
import myFooter from '@/components/MyFooter/index'
import {
  getImages,
  getTypes,
  getTypesOnly
} from '@/api/Home/request'
export default {
  components: {
    carousel: carousel,
    myFooter: myFooter
  },
  data: function () {
    return {
      value: '',
      banner: [],
      types: [],
      swp: {},
      active: 0,
      tp: []
    }
  },
  created: function () {
    this.initBanner()
    this.initTypes()
  },
  mounted: function () {
    //
  },
  // 数据更新，重新渲染数据后执行的内容
  updated: function () {
    //
  },
  methods: {
    onSearch: function (val) {
      this.$toast(val)
    },
    onCancel: function () {
      this.$toast('取消')
    },
    initBanner: async function () {
      const { data: res } = await getImages()
      this.banner = res
    },
    initTypes: async function () {
      const { data: res } = await getTypes()
      this.tp = await getTypesOnly()
      this.types = res
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  background-color: #f00;
  background-image: url("../../assets/images/logo.png");
  background-size: 100% 100%;
  height: 50px;
}
// types
.types {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: #fff;
  margin: 10px 10px 0;
}
.type img {
  width: 50px;
}
.type {
  margin: 10px 4px;
}
// product
.product {
  background-color: #eee;
  padding: 10px;
  margin: 5px 10px;
  border-radius: 20px;
}
.typePro > h3 {
  text-align: center;
}
.typePro > h3 img {
  vertical-align: middle;
  margin: 0 20px;
}
.product .supplier {
  font-size: 18px;
  text-align: center;
}
.product img {
  width: 100%;
  border-radius: 20px;
}
.product .proname,
.product .specs {
  font-size: 18px;
  padding: 0 10px;
}
.product .price {
  font-size: 20px;
  font-weight: bold;
  color: #f00;
  padding-left: 10px;
}
.van-button {
  display: block;
  width: 80%;
  font-size: 20px;
  margin: 0 auto;
}
</style>
